<template>
  <div>
    <!-- <div class="title">
      <div>返回上一级</div>
      <div class="search"></div>
    </div> -->
    <div class="image-video-con flex-between">
      <productLists />
      <div class="aside-detail">
        <div class="logo"></div>
        <div class="title">美国海军作战部长吉尔迪视察 444KB</div>
        <div class="des"><span>上传时间：</span> 12:00</div>
        <div class="tags">
          <tagsGroup></tagsGroup>
        </div>
        <div class="text-con">
          <div class="tit">基本详情</div>
          <div class="params">
            <span>种类:</span>
            <span> JPG图像</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productLists from "@/components/productInfo/productLists";
import tagsGroup from "@/components/common/tagsGroup.vue";
export default {
  components: {
    productLists,
    tagsGroup,
  },
  data() {
    return {
      choosedUnitArr: [],
    };
  },
  methods: {
    unitClick(index) {
      if (this.choosedUnitArr.indexOf(index) == -1) {
        this.choosedUnitArr.push(index);
      } else {
        this.choosedUnitArr.splice(this.choosedUnitArr.indexOf(index), 1);
      }
    },
    // 全选方法
    // allSelected() {
    //   if (this.choosedUnitArr.length == this.imageList.length) {
    //     this.choosedUnitArr = [];
    //     return false;
    //   }
    //   this.choosedUnitArr = this.imageList.map((item, index) => {
    //     return index;
    //   });
    //   console.log(this.choosedUnitArr);
    // },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 0.5rem;
}
.image-video-con {
  @import "~@/styles/mixin.scss";
  height: calc(100vh - 0.8rem);
  // padding-right: calc(2.87rem + 0.22rem);
  width: calc(100% - 2.87rem);
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  overflow-y: auto;

  .aside-detail {
    width: 2.87rem;
    position: fixed;
    right: 0;
    bottom: 0;
    height: calc(100vh - 0.76rem);
    background: #404040;
    & > div {
      width: 2.4rem;
      margin: 0 auto;
    }
    .logo {
      // background-image: url(~@/assets/common/20.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      margin-top: 0.53rem;
      height: 1.6rem;
      border-radius: 0.1rem;
    }
    .title {
      margin-top: 0.12rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
    }
    .des {
      margin-top: 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #bbbbbb;
    }
    .tags {
      margin-top: 0.2rem;
      width: 2.4rem;
      height: 1rem;
      background: #383838;
      border-radius: 0.05rem;
    }
    .text-con {
      .tit {
        margin-top: 0.2rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: #ffffff;
      }
      .params {
        margin-top: 0.1rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.67;
      }
    }
  }
}
</style>